<template>
	<uni-card v-if="userInfo" style="margin: 0;border-radius: 20px 20px 0 0;font-size: 20px;">
		<uni-row>
			<uni-col :span="24" style="text-align: center;">
				<image :src="userInfo.user.avatar" style="width: 80px;height: 80px;border-radius: 80px;"></image>
			</uni-col>
			<uni-col :span="24" style="text-align: center;">
				<p style="font-size: 30px;font-weight: bold;">{{userInfo.user.username}}</p>
			</uni-col>
			<uni-col :span="24" style="text-align: center;font-size: 20px;padding: 10px;">
				<span>{{userInfo.userProfile.birth}}</span>
				<span>&nbsp|&nbsp</span>
				<span>{{userInfo.userProfile.email}}</span>
			</uni-col>
			<uni-col :offset="2" :span="24">
				<uni-grid :column="3" :show-border="false" :square="false" style="font-size: 25px;font-weight: bold;">
					<uni-grid-item>
						<image src="@/static/优惠券.png" style="height: 110px;width: 110px;" @click="click()">
						</image>
						<p style="padding-left: 15px;">优惠券</p>
					</uni-grid-item>
					<uni-grid-item>
						<image src="@/static/会员卡.png" style="height: 110px;width: 110px;" @click="click()">
						</image>
						<p style="padding-left: 15px;">会员卡</p>
					</uni-grid-item>
					<uni-grid-item>
						<image src="@/static/我的订单.png" style="height: 110px;width: 110px;" @click="toOderList()">
						</image>
						<p style="padding-left: 7px;">我的订单</p>
					</uni-grid-item>
				</uni-grid>
			</uni-col>
		</uni-row>
	</uni-card>
	<uni-card>
		<uni-row>
			<uni-col :span="24">
				<uni-list style="font-size: 20px;">
					<uni-list-item title="帮助中心" link @click="click()"></uni-list-item>
					<uni-list-item title="在线客服" link @click="click()"></uni-list-item>
					<uni-list-item title="隐私政策" link @click="click()"></uni-list-item>
					<uni-list-item title="用户协议" link @click="click()"></uni-list-item>
					<uni-list-item title="客服电话" note="15623241603"></uni-list-item>
					<uni-list-item title="资料修改" link to="/pages/film/user/userChange"></uni-list-item>
					<uni-list-item title="退出" link="reLaunch" to="/pages/film/user/userLogin/userLogin"></uni-list-item>
				</uni-list>
			</uni-col>
		</uni-row>
	</uni-card>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from 'vue'

	const userInfo = ref()

	onMounted(() => {
		uni.getStorage({
			key: 'userInfo',
			success: function(res) {
				userInfo.value = res.data
			}
		})
	})
	const click = () => {
		uni.showToast({
			title: '暂未开放',
			icon: 'error'
		})
	}
	const toOderList =()=>{
		uni.navigateTo({
			url:'/pages/film/user/orderList'
		})
	}
</script>

<style>

</style>
